<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="width: 500px;">
            <el-form-item label="课题分类" prop="type_id">
                <el-select v-model="form.type_id" placeholder="请选择活动区域">
                    <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id">{{ item.name }}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="人数上限" prop="members">
                <el-input type="number" v-model="form.members" />
            </el-form-item>
            <el-form-item label="课题标题" prop="title">
                <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="课题要求" prop="conents">
                <el-input type="textarea" :rows="10" v-model="form.conents" />
            </el-form-item>
            <el-form-item label="封面">
                <UpPicture v-model="vForm.img" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">{{ vForm ? '修改' : '发布' }}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { mapState,mapActions } from 'vuex';
import UpPicture from "co/UpPicture";
export default {
    name: 'WebAddTopic',    // 添加修改课题
    components: { UpPicture },
    props: {
                vForm: {
        type: Object,
        default: () => ({}) // 设置默认值为空对象
        }
    },
    data() {
        return {
            form: {
                type_id: '',    // 分类 id
                members: 3,     // 人数上限
                title: '',      // 课题标题
                conents: '',    // 课题要求
                img: '',        // 课题封面
            },
            rules: {
                type_id: [{ required: true, message: '请选择课题分类' }],
                members: [{ required: true, message: '请输入人数上限' },{ pattern: /(^[1-9]\d*$)/, message: '请输入正整数' }],
                title: [{ required: true, message: '请输入课题标题' }],
                conents: [{ required: true, message: '请输入课题要求' }],
            }
        };
    },
    computed: {
        ...mapState('Topic',['typeList']),
        files() {
            if (this.vForm) return [{ name: '1.jpg', url: this.vForm.img }];
            else return [];
        },
    },
    methods: {
        ...mapActions('Topic',['getTypes']),
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$emit('getData',this.form);
                }
            })
        },
    },
    mounted() {
        this.getTypes();
        if (this.vForm) this.form = this.vForm;
    },
};
</script>

<style lang="less" scoped></style>